<template>
  <div>
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#f9f9f9', color: '#333' }"
      style="width: 80%; margin: 0 auto"
    >
      <el-table-column
        label="序号"
        type="index"
        label-position="center"
        width="50"
        header-align="center"
        align="center"
      ></el-table-column>
      <el-table-column
        label="集团名称"
        prop="term"
        header-align="center"
        align="center"
      ></el-table-column>
      <el-table-column
        label="本科生"
        prop="bachelorNum"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="硕士生"
        prop="masterNum"
        header-align="center"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="总计"
        prop="total"
        header-align="center"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: ["myStart", "myEnd"],
  data() {
    return {
      start: this.myStart,
      end: this.myEnd,
      tableData: [],
    };
  },
  created() {
    if (!this.start || !this.end) {
      this.axios({
        url: "grad/yearList",
        methods: "get",
      }).then((res) => {
        let years = res.data.data;

        years = years.sort(function (a, b) {
          return a - b;
        });

        //默认为最近一年
        this.start = years[years.length - 1];
        this.end = years[years.length - 1];
        this.getOrg(this.start, this.end);
      });
    } else {
      this.getOrg(this.start, this.end);
    }
  },
  methods: {
    getOrg(start, end) {
      this.axios({
        url: "grad/org_name_total",
        method: "get",
        params: {
          start: start,
          end: end,
        },
      })
        .then((res) => {
          this.tableData = res.data.data;
          console.log(res.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scope>
.wrap {
  width: 100%;
  height: 450px;
}
.panel-group {
  margin-top: 18px;
  height: 100px;
  width: 100%;
  margin-bottom: 18px;
}
.panel-group .table-panel-col {
  margin-bottom: 32px;
}
.panel-group .table-panel {
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
  width: 220px;
}
.panel-group .table-panel .table-panel-icon-wrapper {
  color: #fff;
  float: left;
  margin: 14px 0 0 14px;
  padding: 16px;
  transition: all 0.38s ease-out;
  border-radius: 6px;
}

.panel-group .table-panel .table-panel-icon {
  float: left;
  font-size: 48px;
}
.panel-group .table-panel .table-panel-description {
  float: right;
  font-weight: bold;
  margin: 26px;
  margin-left: 0px;
}

.panel-group .table-panel .table-panel-text {
  line-height: 18px;
  color: rgba(0, 0, 0, 1);
  font-size: 20px;
  margin-bottom: 10px;
}

.panel-group .table-panel .card-panel-num {
  font-size: 20px;
}
</style>
